<div class="content">
  <h1 id="项目通用开发规范">项目通用开发规范</h1>
  <h2 id="项目结构">项目结构</h2>
  <p>基础开发目录结构如下</p>
  <pre class="language-bash"><code>webpack <span class="token comment"># 脚手架第三方生成文件</span>
├── buld           # webpack配置环境
├── config        # webpack配置环境
├── node_modules   # 安装依赖工具
├── package.json   # 开发生产环境依赖
   </code>
      <code>src <span class="token comment"># 开发目录</span>
├── assets      <span class="token comment">    # 资源目录</span>
│   ├── images  <span class="token comment">   # 开发用图片</span>
│   │   └── <span class="token punctuation">..</span>.
│   └── sass    <span class="token comment">   # 开发用公共scss</span>
│       └── <span class="token punctuation">..</span>.
├── components  <span class="token comment">    # 组件文件夹</span>
├── config      <span class="token comment">    # 项目级配置</span>
├── filters     <span class="token comment">    # 通用过滤器</span>
├── router      <span class="token comment">    # 路由统一配置</span>
├── store       <span class="token comment">    # Vuex状态管理</span>
├── utils       <span class="token comment">    # 封装公共js方法</span>
└── pages       <span class="token comment">    # 页面开发目录</span>
    └── <span class="token punctuation">..</span>.
      </code>
  </pre>
  <h2 id="页面开发">页面开发</h2>
  <h3 id="规范及-demo">页面规范</h3>
  <p>目前页面采用 <code>vue，html，scss</code> 分离的方式进行开发，demo 如下</p><pre class="language-bash"><code>src/pages/home/index  <span class="token comment">       # 页面存放目录</span>
├── app.vue             <span class="token comment">  # 基础vue，包括Javascript逻辑方法</span>
├── template.html       <span class="token comment">  # Html模板</span>
└── style.scss          <span class="token comment">  # Scss样式</span>
</code></pre>
  <h3 id="app-vue-开发说明">app.vue 开发说明</h3>
  <p>采用上述的 <code>app.vue</code> 进行说明</p><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>./template.html<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token punctuation">:</span> <span class="token string">'home-index'</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>scss<span class="token punctuation">'</span></span><span class="token punctuation">&gt;</span></span><span class="token style language-css">
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">'./style.scss'</span><span class="token punctuation">;</span></span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre>
  <ul>
    <li><code>./template.html</code> html 引用路径</li>
    <li><code>@import "./style.scss";</code> scss 引用路径</li>
  </ul>
  <h3 id="template-html-开发说明">template.html 开发说明</h3>
  <p>采用上述的 <code>template.html</code> 进行说明</p><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>home-index<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>index-h1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Hello World!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre>
  <ul>
    <li><code>class="home-index"</code> 建议在根块级节点添加一个对应路由或路径名对应的 class 命名</li>
  </ul>
  <h3 id="style-scss-开发说明">style.scss 开发说明</h3>
  <p>采用上述的 <code>style.scss</code> 进行说明</p><pre class="language-scss"><code><span class="token selector">.home-index </span><span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>

  <span class="token selector">.index-h1 </span><span class="token punctuation">{</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 28 <span class="token operator">/</span> <span class="token variable">$ppr</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
  <ul>
    <li>Sass的变量定义在 <code>_variable.css</code>和<code>mixin/index.scss</code>中，已经通过webpack全局加载</li>
  </ul>
  <h3 id="新增路由配置">新增路由配置</h3>
  <p>配置到你已有或新增一个路由的配置 js 文件</p><pre class="language-bash"><code>src/router
├── home.js
├── index.js
└── <span class="token punctuation">..</span>.
</code></pre>
  <ul>
    <li><code>index.js</code> router 基础配置 js，包含路由新增</li>
    <li><code>home.js</code><small>这里已新增路由举例</small></li>
  </ul>
  <h3 id="home-js">home.js</h3><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">HomePage</span> <span class="token operator">=</span> r <span class="token operator">=&gt;</span> require<span class="token punctuation">.</span><span class="token function">ensure</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">r</span><span class="token punctuation">(</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../pages/home/index/app.vue'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'home'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/home'</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> HomePage
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre>
  <ul>
    <li><code>path</code> 路由地址</li>
    <li><code>HomePage</code> 引用的页面 vue</li>
  </ul>
  <h3 id="index-js">index.js</h3><pre class="language-js"><code><span class="token operator">...</span>
<span class="token keyword">import</span> HomeRouter <span class="token keyword">from</span> <span class="token string">"./home"</span><span class="token punctuation">;</span>

<span class="token operator">...</span>
<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  linkExactActiveClass<span class="token punctuation">:</span> <span class="token string">'active'</span><span class="token punctuation">,</span>
  routes<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token operator">...</span>HomeRouter<span class="token punctuation">,</span>
  <span class="token punctuation">]</span>
<span class="token operator">...</span>
</code></pre>
  <ul>
    <li><code>HomeRouter</code> 新增的路由 js</li>
    <li><code>...HomeRouter</code> 新增至 routes 中</li>
  </ul>
  <blockquote>
    <p>OK!，至此已经完成了一个页面的开发及路由配置，你通过自己配置的路由路径即可访问你新增的页面</p>
  </blockquote>
</div>
</div>
